<template>
    <router-link :to="link" class="button-icon">
        <span class="tag">
            <slot></slot>
        </span>
        <span class="num"><i class='fa' :class="icon"></i>{{ badge }}</span>
    </router-link>
</template>

<script>
    export default {
		name: 'ButtonIconBadge',
        props: {
            link: {},
            badge: {},
            icon: {}
        }
    };
</script>

<style scoped="">
    .button-icon {
        display: inline-block;
        margin: 0 10px 10px 0;
        position: relative;
        border-radius: 3px;
        font-size: 18px;
    }
    .tag{
        background: #fff;
        border: 1px solid #dddddd;
        color: #666;
        display: inline-block;
        font-size: 13px;
        font-weight: 300;
        letter-spacing: 1px;
        padding: 8px 9px;
        text-transform: uppercase;
    }
    .num{
        background: #FAFAFA;
        border: 1px solid #dddddd;
        display: inline-block;
        font-size: 13px;
        padding: 8px 9px 8px 11px;
        color: #888;
        position: relative;
        margin-left: -6px;
    }
    .num:before {
        border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #c6c6c6;
        border-style: solid;
        border-width: 4px;
        content: "";
        display: block;
        left: 0px;
        position: absolute;
        top: 12px;
    }
    .num:after {
        border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #ffffff;
        border-style: solid;
        border-width: 4px;
        content: "";
        display: block;
        left: -1px;
        position: absolute;
        top: 12px;
    }
    .tag:hover{color: #1cc6df!important;}
</style>
